<template>
  <!-- 购买时，弹出层选择规格 -->
  <wux-popup position="bottom"
    :visible="addCartShow"
    @close="closeTags"
    wux-content-class="cart-wrap"
    closable
  >
    <wux-cell-group prefixCls="cart">
      <div class="cart-top">
        <div class="cart-img">
          <img src="https://www.fybqq.com/wp-content/uploads/1970/01/1543236265-1.jpeg">
        </div>
        <div class="cart-title">{{MoneySymbol}}99</div>
        <!--  -->
        <div class="cart-spec">
          {{specActiveText}}
        </div>
      </div>
      <div class="content-cart">
        <div class="title">款式颜色</div>
        <div class="content-list">
          <block v-for="(item, index) in goodsList" :key="index">
            <div :class="index === specListFlag? 'describe-active' : 'describe'"
              @click="clickSpec(index)"
            >
              【{{item.spec}}】
            </div>
          </block>
          <!-- <div class="describe-active">【紫色】</div> -->
        </div>
      </div>

      <div class="content-cart-num-wrap">
        <div class="num-title">数量：</div>
        <!-- 步进器组件 -->
        <van-stepper
          :value="num"
          disable-input
          integer
          custom-class="stepper-wrap"
          input-class="stepper-input stepperBg"
          plus-class="add-input stepperBg"
          minus-class="reduce-input stepperBg"
          @change="onChangeNum"
        />
      </div>

      <div class="btn-bottom">
        <button @click.stop="cartConfirm">确认</button>
      </div>
    </wux-cell-group>
  </wux-popup>
</template>

<script scope>
import { bindViewTap, showToast } from '@/utils/index' // 引入公用库
import TYPES from '@/constant/index' // 常量文件
import store from '@/utils/store' // 全局状态管理

export default {
  props: ['goodsData', 'goodsList'], // 接收外部传入的数据
  data () {
    return {
      MoneySymbol: TYPES.goodsData.MoneySymbol, // 存金额前缀符号
      addCartShow: false, // 弹出蒙层控制
      specListFlag: -1, // 控制当前选择的商品颜色
      dispatchName: '', // store事件名，动态改变的
      viewTap: {}, // 跳转页面参数
      num: 1 // 购买数量控制器
    }
  },
  // 计算属性
  computed: {
    specActiveText () {
      let text
      if (this.specListFlag === -1) {
        text = '请选择 款式颜色'
      } else {
        text = `已选：【${this.goodsList[this.specListFlag]['spec']}】`
      }
      return text
    }
  },
  // 自定义函数
  methods: {
    // 打开弹出层
    openTags (data) {
      this.dispatchName = data.dispatchName
      this.addCartShow = true // 显示弹出层
      if (data.viewUrl) {
        // 存放，跳转页面路径及方式
        this.viewTap = {
          url: data.viewUrl,
          flag: true
        }
      }
    },
    // 关闭弹出层(弹出点击遮罩层事件也用它)
    closeTags () {
      this.addCartShow = false
    },
    // 数量增减事件
    onChangeNum (e) {
      this.num = e.mp.detail
    },
    // 颜色选择
    clickSpec (index) {
      // 如果等于当前的产品，就取消选择
      if (this.specListFlag === index) {
        this.specListFlag = -1
      } else {
        this.specListFlag = index
      }
    },
    // 确认按钮事件
    cartConfirm () {
      let specListFlag = this.specListFlag // 商品款式缓存
      // 没有选择产品颜色，提示
      if (specListFlag === -1) {
        showToast({
          title: '请选择款式',
          icon: 'none'
        })
        return
      }
      let goodsData = this.goodsData // 商品信息（外部传入）
      // 合并过滤存放购买的商品信息
      let data = {
        title: goodsData.title,
        price: goodsData.price,
        oldprice: goodsData.oldprice,
        link: goodsData.link,
        thumb: this.goodsList[specListFlag]['thumb'],
        spec: this.goodsList[specListFlag]['spec'], // 商品颜色
        num: this.num
      }
      // 容错处理，提交信息
      if (data.link > 0 && data.spec) {
        // 使用的是原生提示器，封装了一层
        showToast({
          title: '添加成功'
        })
        // 全局vuex，把商品数据传递过去处理添加或增加数量
        store.dispatch(this.dispatchName, data)
        // 判断是否需要跳转页面(如：订单确认支付页面)
        if (this.viewTap) {
          bindViewTap(this.viewTap.url, true)
        }
        setTimeout(() => {
          // 隐藏弹层
          this.closeTags()
          // 重置选择的产品及数量参数等
          this.num = 1
          this.specListFlag = -1
          this.viewTap = {}
        }, 30)
      } else {
        showToast({
          title: '添加失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scope>
/* 弹出层覆盖之前框架的属性 */
.cart-wrap {
  overflow: visible !important;
}
/* 弹出层-选择商品规格 */
.cart {
  padding-bottom: 160rpx;
  color: #000;
}
.cart .cart-top {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 170rpx;
  border-bottom: 1PX solid #f5f5f5;
}
/* 规格商品图片 */
.cart-top .cart-img {
  position: absolute;
  overflow: hidden;
  left: 20rpx;
  bottom: 20rpx;
  width: 200rpx;
  height: 200rpx;
  padding: 6rpx;
  border-radius: 6PX;
  background: #f5f5f5;
}
.cart-top .cart-img img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 6PX;
}
/* 选择商品层头右侧 */
.cart-top .cart-title,.cart-top .cart-spec {
  margin-left: 250rpx;
}
.cart-top .cart-title {
  height: 55rpx;
  line-height: 55rpx;
  font-size: 36rpx;
  color: #E12F25;
}
/* 弹出内容区 */
.content-cart {
  padding-left: 28rpx;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 1PX solid #f5f5f5;
}
.content-cart .title {
  height: 86rpx;
  line-height: 86rpx;
}
.content-cart .content-list {
  display: flex;
  justify-content: flex-start;
  line-height: 32rpx;
  padding-bottom: 16rpx;
}
.content-cart .describe, .content-cart .describe-active {
  margin-right: 32rpx;
  padding: 0 24rpx;
  height: 56rpx;
  line-height: 56rpx;
  border-radius: 10rpx;
}
.content-cart .describe {
  background: #F2F2F2;
}
.content-cart .describe-active {
  background: #E9CF85;
  color: #000;
  /* color: #f4faf0; */
  /* background: #E51C23; */
}
/* 数量外层样式 */
.content-cart-num-wrap {
  padding: 0 26rpx;
  display: flex;
  align-items: center;
  text-align: left;
  line-height: 110rpx;
  border-bottom: 1PX solid #f5f5f5;
}
.num-title {
  flex: 1;
}
/* 步进器样式 */
/* .stepper-wrap {
} */
.stepperBg {
  background: #E9CF85 !important;
}
.stepper-input {
  border-radius: 28rpx !important;
  margin: 0 14rpx !important;
  padding: 0 10rpx !important;
  color: #000 !important;
}
/* 增加/减少按钮 */
.add-input, .reduce-input {
  border-radius: 50% !important;
}
/* 减少按钮 */
/* .reduce-input {} */

/* 底部确认 */
.btn-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;

}
.btn-bottom button {
  border-radius: 0;
  color: #000;
  background: #E9CF85;
}
</style>
